import { Card, Descriptions } from "antd";
import { ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconPlay, IconReply, IconStop } from "@douyinfe/semi-icons";
import { useModel } from "umi";

const OrganizationStatus = () => {
    const { selectedOrganization, updateOrganizationStatus, resetInit } = useModel("gateway.info");

    return (
        <Card
            bordered={true}
            hoverable
            title="状态信息"
            size="small"
            style={{ marginBottom: 10 }}
            bodyStyle={{ padding: "10px 20px" }}
            extra={
                <ButtonGroup>
                    {selectedOrganization.usageStatus ? (
                        <Button
                            type="danger"
                            icon={<IconStop />}
                            onClick={() =>
                                updateOrganizationStatus({
                                    usageStatus: false,
                                    usageTime: null,
                                    verifyStatus: false,
                                    verifyTime: null,
                                })
                            }
                        >
                            停用组织
                        </Button>
                    ) : (
                        <Button
                            type="primary"
                            icon={<IconPlay />}
                            onClick={() =>
                                updateOrganizationStatus({
                                    usageStatus: true,
                                    usageTime: new Date().getUTCTime(),
                                    verifyStatus: true,
                                    verifyTime: new Date().getUTCTime(),
                                })
                            }
                        >
                            启用组织
                        </Button>
                    )}

                    {selectedOrganization.initializationStatus && !selectedOrganization.usageStatus ? (
                        <Button type="primary" icon={<IconReply />} onClick={resetInit}>
                            取消初始化
                        </Button>
                    ) : (
                        ""
                    )}
                </ButtonGroup>
            }
        >
            <Descriptions column={3} size="small" labelStyle={{ width: 100 }}>
                <Descriptions.Item label="核准状态">{selectedOrganization.verifyStatus ? <span className="green">已核准</span> : <span className="red">待核准</span>}</Descriptions.Item>
                <Descriptions.Item label="启用状态">{selectedOrganization.usageStatus ? <span className="green">已启用</span> : <span className="red">暂停使用</span>}</Descriptions.Item>
                <Descriptions.Item label="初始化状态">{selectedOrganization.initializationStatus ? <span className="green">已初始化</span> : <span className="red">未初始化</span>}</Descriptions.Item>
            </Descriptions>
        </Card>
    );
};

export default OrganizationStatus;
